<template>
	<view>
		<status-bar title="处理异常" />
		<view class="tabs bgwhite" :style="{top: totalHeight + 'px'}">
			<up-tabs :list="tabList" :scrollable="false" lineColor="#0B77F0" lineWidth="18" :activeStyle="{color:'#222',fontWeight:'bold'}"
				@click="tabClick"></up-tabs>
		</view>
		<view class="padding20" style="margin-top: 44px;">
			<block v-if="current == 0">
				<view class="padding20 d-flex a-center m-bot20" v-for="(item,index) in 2" :key="index">
					<view class="size28 color-222 m-right10">11月10日 -</view>
					<view class="flex-1 size28" style="color: #F83948;">迟到20分钟</view>
					<view class="btn flexac size24 white">处理</view>
				</view>
			</block>
			<block v-else>
				<view class="padding20 size28 color-222 m-bot20" v-for="(item,index) in 2" :key="index">11月10日 - 外出20分钟</view>
			</block>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useMainStore } from '@/stores/index'
	import { Toast } from '@/utils/utils.js'
	import Http from '@/utils/request.js'
	import statusBar from '../components/statusBar.vue'
	
	const mainStore = useMainStore()
	const totalHeight = computed(() => {
		return mainStore.statusBarHeight + mainStore.navBarHeight
	})
	const tabList = ref([
		{ name: '上下班打卡' },
		{ name: '假勤' },
		{ name: '加班' },
		{ name: '外出打卡' }
	])
	const current = ref(0)
	
	onLoad(() => {
		getList()
	})
	
	// 月考勤异常记录查询
	const getList = () => {
		let month = uni.$u.timeFormat(Number(new Date()), 'yyyy-mm')
		Http.get({
			url: '/hr/adc/getAbnList',
			data: {
				month
			}
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
		})
	}
	
	const tabClick = ({index}) => {
		current.value = index
	}
</script>

<style lang="scss" scoped>
	.tabs {
		width: 100%;
		position: fixed;
		left: 0;
		z-index: 11;
	} 
	.btn {
		width: 80rpx;
		height: 48rpx;
		background: #1885FF;
		border-radius: 6rpx;
	}
</style>
